Prep 2 
| SSAA: 


p 
[ 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
l 
| 
i 
| 
l 
| 

j 


À 


= i (First Unit) - 
Websites i = 


Br P I j= | m 
a "d d > 


After completing this unit, it is expected that the student should be able to: 


1- Recognize some basic scientific concepts and terminology of information 
technology (website — webpage) 

2- Practice Basic processes for dealing with information and communication 
technology applications. 

3- Discuss the impact of the usage of modern information technology 
services to the different academic and life fields. 
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Form — some form input controls 


Explain HTML tags 


Dear students: 


content (static webpage) 
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: (First Topic) 
— HTML 
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After completion of this topic is expected the student should be able to: 


Employ HTML tags in order to create an interactive webpage 
Perform some HTML operations (add data field/ add a radio button) 
Participates his schoolmates in the learning activities Preface 


We’ve finished in the first semester designinga number of my school site 
pages which displays information about the school. We have the ability to 
read the content and navigate through it without any ability to change the 


We will create an interactive webpage through which you can enter your 
personal data via a form data input elements as in the following illustrate 


\ password 


gender 


English 


confirm password 


registration form 


Lo! 


age (numeric) | 


O male 


proficiency language 


French 


Germany 
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Form 


Dear students, to create a form as it is in the previous illustration and 

enter your personal data through HTML language, you can use 

<form> ... </form>. With a form element, you can add a group of other 
elements to a webpage such as buttons and fields used for data entry in order 
to send these data to storing. 

We will learn the different faces to some buttons and data entry fields and 
how you add to the webpage. 


Add Name Field 


e To add a text data field for entre a student name, textbox will be added 
which give ability to the user to enter a string or text data via keyboard 


1- HTML language 


text box 
e To add a previous textbox to a webpage: 


<input type = “text> 
G 7 
EZ 


By help of your teacher and participation of your colleagues, 
e Create a new text file. 
e Write the following HTML tags, and save the file with .html extension. 


<form> 

name 

<input type = “text”> 
</form> 


Open the HTML document in an available internet browser, webpage will be 
shown as follows: 
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Notice: 
After adding a text field, you can type any text within it. 


Add Password Field 


(*) symbol will be displayed instead of characters to secure a password key 


Password field 


To add a password field to the webpage 


<input type = "password" > 
~ 

G 
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By help of your teacher and participation of your colleagues, Required: 
e Create a new text file. 
e Write the following HTML tags, and save the file with .html extension. 


<form> 
<input type = "password"> 
</form> 


Open the HTML document in an available internet browser, webpage will be 
shown as follows: 
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password | +++++ 


password field 


Notice: After adding a password field, you can type any secure text within it. 


Add Age Text Field 


e By help of your teacher and participation of your colleagues, follow the 
previous steps to add a data field in order you can type your age. 


Add a radio button field 


e A radio button field defines a radio button, by which the user can select 
one of a limited number of options such as your gender (male/female) 


O © 


To add a radio button field to the webpage 


<input type = "radio" > 
A 
G 
| am 


By help of your teacher and participation of your colleagues, 
e Create a new text file. 
e Write the following HTML tags, and save the file with .html extension. 
<form> 
male<input type = "radio" > 
female<input type = "radio" > 
</form> 


(op) 
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male female 


radio field 


Notice that, you still can choose and select all available options! 


Activity 


By help of your teacher and participation of your colleagues, 
e Search for solving the previous problem about how you can prevent the 
user from choosing or selecting all available options? 
-Of course, you can add name attribute to all available radio buttons with the 
same value as in the following HTML tags 


<form> 

male<input type = "radio" name="'a"> 
female<input type = "radio" name="a" > 
</form> 


Open the HTML document after the previous editing in an available internet 
browser, webpage will be shown as follows: 


male @ female 


radio field 
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Remember that 


Form: with a Form element you can add a group of other elements to a 
webpage such as buttons and fields used for data entry in order to send these 
data to storing. 


Text input field: which gives ability to the user to enter a string or text data 
via keyboard 


Password input field: as the same as text field but (*) symbol will be 
displayed instead of characters to secure a password key 


Radio input field: by which the user can select one of a limited number of 
options such as your gender (male/female) 


QUESTIONS AND 
EXERCISES 


Write the scientific term to the following statements: 


1. Used with button and data fields to enter data and sending it to the 
webpage. (sacar ee see ) 
2. Give ability to choose or select only one option from many options. 


Complete the following sentences: 


1. To create an interactive webpage for register a student data you add 
.. used to input data. 


2. To add student name é input field, you can add ................. to a webpage. 
3. (*) symbol will be displayed instead of original text to secure................ 
4. To choose your gender you can add ...................... To a webpage 
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Select from (B) column that matches with other from (A) column 


a ee ee ee 
<input type= text> Add a textbox field 
<input type= password > Add a radio button field 


<input type='radio’> Add a password field 
<input type="text > Add an age input field 


Put (N ) in front of the correct sentence and (X) in front of the wrong: 


1- In a webpage the form element doesn’t require sending the entered 
data to the web server ( ) 

2- To prevent the user from choosing or selecting more than one option 
or choice, you can add name attribute to radio input field ( ) 

3- To add a textbox field in order the user can enter his name, you add 
radio field ( ) 


SS = Se ee 
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chapter (2) 


Form elements input fields Continued 


e Explain some of the HTML input elements (checkbox — button — 
submit — reset) 

e Type some of HTML tags correctly 

e Remind the largest possible number of ideas for using HTML tags 

e Show a positive trend towards the importance of HTML language 


After you’ve selected your gender (male/female), we will add checkboxes to 
give ability to the user that he can select more than one choice at the same 
time. 


Checkbox field 


e To select your proficiency language(s), you can add checkbox input 
field by which you can select more than one choice 


BOB 


e To add checkbox field to a webpage: 
<input type = "checkbox''> 


Note: You can Dear Student repeat the previous command to add more than 
the selection of the web page Found. 


G 
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By help of your teacher and participation of your colleagues, 
e Create a new text file. 


e Write the following HTML tags, and save the file with .html extension. 
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<form> 


e Select your proficiency languages<br> 


Arabic <input type = "'checkbox''> 
English <input type = "checkbox''> 
French <input type = "'checkbox''> 
</form> 


e Open the HTML document in an available internet browser, webpage 
will be shown as follows: 


select your proficiency languages 


“| arabic 


O english 
“| french 


checkbox fields 


e — — i 


The user can click on this to achieve or execute JavaScript function such as 
clear or save entered data within the form 


To add a button to a webpage you can use the following tag 


<input type = "button"> 
| Activity 


By help of your teacher and participation of your colleagues, 
e Create a new text file. 


_ 
_ 


pt 
| 
| 
| 
I 
| 
I 
| 
| 
l 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
Eu 


i 
[ 
| 
| 
| 
| 
| 
| 
| 
| 
| 
l 
| 
| 
l 
| 
| 
l 
| 
l 

j 


e Write the following HTML tags, and save the file with .html extension. 


<form> 
<input type = "button" value=''ok''> 
</form> 
Button is used when clicking on it execute a certain task or function 
such as record data or delete data 
e Open the HTML document in an available internet browser, webpage 
will be shown as follows: 


x 
button field 


Notice: we’ve used value attribute to assign caption to a button "ok" 


Submit button 


The user click this to submit the form data to another webpage assigned by 
action attribute value of the Form 


Submit Query 


submit button 


-In order to add a submit button to a webpage, you can use the following tags 


<input type = "submit"> 
A 
G 
=z 


By help of your teacher and participation of your colleagues, 
e Create a new text file. 
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e Write the following HTML tags, and save the file with .html extension. 


<form action="'process.php''> 
<input type = ''submit''> 
</form> 


Submit Query 


submit button 


Open the HTML document in an available internet browser, webpage will be 
shown as follows: 

As you see in the previous HTML tags after submit button be clicked all data 
send to process.php webpage in order to processing via php statements 
which we will teach in the next years. 


user class 
name [+d 


password | | 


new user 


-The user click it to clear all data fields to its original state 
- To add reset button to a webpage: 
<input type = "reset"> 
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By help of your teacher and participation of your colleagues, 
e Create a new text file. 
e Write the following HTML tags, and save the file with .html extension. 


<form> 
<input type = "'reset''> 
</form> 


reset button 


e Open the HTML document in an available internet browser, webpage 
will look like: 
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Remember that 


Checkbox field: by which you can select more than one choice. 


MOM 


Button input field: the user can click this to achieve or execute JavaScript 
function such as clear or save entered data within the form. 


Submit button: the user click this to submit the form data to another 
webpage assigned by action attribute value of the Form. 


Reset button: the user click it to clear all data fields to its original state. 
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QUESTIONS AND 
EXERCISES 


Put (\) in front of the correct sentence and (X) in front of the wrong: 


1-To select your proficiency language(s), you can add checkbox input field 
to a webpage. ( ) 

2-Name attribute used for display a text on the button. ( ) 

3-Submit button used to clear input fields from any previous data. ( ) 


Complete the following sentences: 


| PETE FERNEN. Used to execute task or call JavaScript function 
SS E ETET Used to send all Form data to other webpage 
Se eer EET Used to clear all previous data from all input fields 


Select from (B) column that matches with other from (A) column: 


<input type= checkbox > Add a checkbox 
<input type= button’> Add a button 


<input type= submit’> Add a submit or send button 
<input type= reset’> Add a reset or clear button 
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(chapter 3) 
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After completing this foie 1S a the uden should be able to: 
e Design an interactive webpage to register his data 


e Type an HTML tags to register data correctly 
e Appreciate the importance of HTML language for create an interactive 


Webpage m 


e Design a webpage with a registration data Form 
e Dear student, using the previous Form and data fields, create an 
interactive webpage as in the following illustration 


r : I.) 


C= JLo 


registration form 


| name 


password 


confirm password 


age (numeric) 


gender male female 


proficiency language 


English [] French (| Germany 


save new 
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<html> 

<head> 

<title></title> 

</head> 

<body dir="ltr''> 

<center> 

registration form<br><br><br> 

<form action="pro.php"> 

name<input type="'text''><br><br><br> 

password<input type="password''><br><br><br> 

confirm password<input type="'password''><br><br><br> 
age (numeric)<input type="'text''><br><br><br> 
gender<input type="radio''>male<input type="'radio''>female 
<br><br><br> 

proficiency language 

<input type="checkbox''>English 

<input type=""checkbox''>French 

<input type=""checkbox"'>germany 


<br><br><br> 


<input type="submit" value="save"'> 
&nbsp&nbsp&nbsp 


<input type="'reset'' value=''new''> 


</center> 
</form> 
</body> 
</html> 
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(Second Unit) 
Java Script Language 


After completing this unit , it is expected that the student will be able to: 


e Discuss the effect of using the services of the modern information 
techniques on academic and different life fields. 

e Recognize some production tools of information pages and Internet 
services. 

e Produce relatively creative projects using JavaScript language. 

e Use technological production tools for support and develop his 

learning. 

e Employs technological communication tools in order to communicate, 

interact and cooperate with others to support learning 


JAVA 


SCRIPT 
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=> | (First Topic) 
= Basics of JavaScript —_—— 


After completing this topic, it is expected that the student will be able to: 
e Recognize some of the basic JavaScript concepts 
e Recognize the basic rules for creating a webpage using JavaScript 
statements. 
e Write a JavaScript language code accurately 
e Acceptto learn the JavaScript language 


Basic Concepts of JavaScript Language 


ü 
| 


e Introduction 
Dear student, to develop an interactive webpage project in order to enter 
your data and confirm that the entry data is correct , you will need to add a 
JavaScript statements to your webpage document. This is because HTML 
language isn’t enough to achieve that. We will review some of the basics of 
programming with JavaScript through this unit. 
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JavaScript fundamentals: 


- JavaScript commands and instructions are called Statements. 

- JavaScript commands and instructions (Statements) are written within 
HTML tags. 

- JavaScript statements are written inside <script> ..</script> tag. 

- Each statement must end with a semi-colon (;) character. 


- The letter case must be considered while writing JavaScript statements. 


<html> 
<head> 
<script></script> 
</head> 
<body> 
<script></script> 
<script></script> 
</body> 
</html> 


- Document sections in which JavaScript will be written as HTML 


alert () statement 


- alert() statement used for displaying a message via a dialogue box. 
alert("the message"); 


Notice that, the message must be written within double high quotations. 
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By the help of your teacher and participation of your colleagues, 
e Create a webpage that displays a dialogue box with message "welcome" 
on loading by the following steps: 


Execution: 


e Create a new text file. 
e Write the following HTML tags, and save the file with .html extension. 


<body> 
<script> 


alert("welcome"); 


</script> 
</body> 


e Open the HTML document in an available internet browser, webpage 
will be shown as follows: 


A, welcome 


Alert message box 
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Document .write(...) statement. 


Document .write statement is used for displaying text within a webpage 


contents. 
a 
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By the help of your teacher and participation of your colleagues, 
e Create a webpage displays "computer and information technology 
subject" text as its content, by the following steps. 


Execution: 


- Create a new text file. 


- Write the following HTML tags, and save the file with .html extension. 


<body> 
<script> 


- Document .write("computer and information technology subject"); 


</script> 
</body> 
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Remember that 


alert() statement: used for displaying a dialogue box with message to 


the user. 


document.write() statement: used for displaying a text within the webpage 


contents. 


a glen, 


2 


Write the scientific term to the followin 


1. The language used to make your registration webpage to interactive 


QUESTIONS AND 
EXERCISES 


statements: 


Put (y ) in front of the correct sentence and (X) in front of the wrong 


one: 


1. HTML language isn’t enough to make a confirmation to the data entry. ( ) 
2. each statement must end with a semi-colon (;) character. ( ) 
3. There isn’t any different between using small and capital letter while 


writing JavaScript statements. ( ) 
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After completing this unit, it is expected that the student will be able to: 
e Recognize how to call JavaScript code using a button 

Recognize the function structure 

Write JavaScript statement for calling a function 

Employ JavaScript tools in his interactive project 


e 
e 
e 
e Participate with his schoolmates in the learning activities 


Dear student, you noticed that all JavaScript statement within 
<script> .... </script> tag were implemented automatically 


If you want the JavaScript statement within <script> ... </script> tag to 
be implemented when an event occurs (such as button click), you should 
learn about a function 


Function is JavaScript statements grouped together in named block and 
performed according to call it 


We will learn to: 


e Create a JavaScript function contains a group of statements 
e Call the function according to occurrence of a button click 
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Function creation 


To create a function ‚we will do the following: 
e Write word function and followed with its suitable name 


e Write a group of JavaScript statements between { ... } curly brackets 


as shown in the following rectangle. 


function function_name () { 
code to be executed 


} 


| Activity 


By the help of your teacher and participation of your colleagues, Create 
a function that displays "Arab Republic of Egypt" via a message box 


Execution: 


- Create a new text file. 


- Write the following HTML tags, and save the file with .html extension. 


<body> 
<script> 
function country() 


{ 
alert ("Arab republic of Egypt"); 
} 


</script> 
</body> 


NOTICE 


- When opening the HTML document in an available internet browser, an 


empty webpage will be shown, because there isn’t any function call to 
country() function. 
To implement any function, first you must call it. 
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Function call 


To call any function, follow these steps: 


-Write an HTML tag for displaying a button within webpage. 
-Write an ‘onclick’ attribute to this button 
-Write a function name as the value of that attribute (onclick). 


As the following: 
<input type="button"onclick="function name you need to call"> 


| Activity 


By the help of your teacher and participation of your colleagues, 
e Change the previous activity (1-2) so that the country() function can be 
executed when a button clicked. 


Execution: 


- Open the previous HTML document 
- Change the contents so it will be shown as the following: 


<body> 

<input type="button"onclick="country()" value="click me"> 
<script> 

function country() 


{ 
alert ("Arab republic of Egypt"); 
1 


</script> 
</body> 


Notice: 
- Function will be called and executed only when a button clicked 
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Textbox content manipulation 


In the following figure , we will find 


- A textbox and button is displayed, write any text within the textbox 
-When a button clicked, an alert box will be displayed in which the content 
of the textbox can be seen 
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By the help of your teacher and participation of your colleagues, 

e Create a new text file. 

e Write the following HTML tags, JavaScript statements and save the file 
with .html extension. 
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<body> 

<form name="form1"> 

<input type="text" name="t1"> 

<input type="button"onclick="printTextContent()" value="click me"> 
</form> 

<script> 


function print Text Content() 


{ 


alert (form1.t1.value); 


} 
</script> 
</body> 


Notices: 
In the previous HTML document, to use and manipulate the textbox, 


e Give aname form! to the <form> element (name="form1") 
e Give a name tl to the textbox (name="t1") 


We can use the value of the textbox through form1.tl.value statement 


Remember that 


e Function is JavaScript statements grouped together in a named block 


and perform according to calling it. 


e If you want JavaScript statements within <script> ... </script> tag to be 
implemented when an event occurs (such as button click), you should use a 


function. 
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QUESTIONS AND 
EXERCISES 


Complete the following statements: 


1. If you want JavaScript statements to be implemented when an event 
occurs (such as button click), you should use a o...on 
2 EAE E A is JavaScript statements grouped together in a 
named block and performed according to call it 


Put (\) in front of the correct sentence and (X) in front of the wron 
one: 

1. Adding a value attribute to the button element for is called a function.( ) 
2. We use a “onclick” attribute for writing a text on a button. ( ) 

3. For reading a textbox content using JavaScript language, you should 
give a name to the <form> element and give a name to the textbox. ( ) 

4. JavaScript statement is written inside <script>. (  ) 
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(Third Topic) 
Branching "IF Statement" 


After completing this unit, it is expected that the student will be able to: 


e Use some of JavaScript statement to create a webpage 
e Solve some examples using branching IF statement 
e Participate his schoolmates in the learning activities 


In the previous two topics , you have noticed that, JavaScript 

statements are being executed one by one. But we may need to execute or 
non-execute some of these statements according to condition expression 
result as in the following illustration: 


Is the total of your 


degrees greater than or 


eaual to 50 degree? 


Print u , 
Conditional expression 


Example: 


If the condition result lead to true (total >=50), "success" word will be 
printed. 


To check the condition expression, we will use IF statement as the following: 


IF (condition expression) 
{ Statements to be executed if the result of the expression is true} 
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Explanation: 


- Condition is expression that must be evaluated first and lead to true or false 
- Statements to be executed if the result lead to true found between { } curly 
brackets. 

- If the result lead to false these statements will not be executed. 
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By the help of your teacher and participation of your colleagues, 
e Create a webpage that contains a Form element with: 


1- Textbox in which we can type a total of degrees 


2- Button on which we can click 


3- If the condition result lead to true, an alert box with "success" will be 
displayed as in the following illustration. 


Message from webp... 


A succes 
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Execution: 


e Create a new text file. 


e Write the following HTML tags, JavaScript statements and save the file 


with .html extension. 


<body> 

<form name="form1"> 

<input type="text" name="t1"> 

<input type="button" value="click me"onclick="total()"> 
</form> 

<script> 

function total() 


if (form1.tl.value>=50) 
alert("success"); 


} 
} 


</script> 
</body> 


Remember that 


Branching IF statement is written as the following: 


if (condition expression) 


{ Statements to be executed if the condition result lead to true } 
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QUESTIONS AND 
EXERCISES 


? 


Write the scientific term to the following statements: 


1. Execute or non-execute some of JavaScript statements according to 
condition expression result. 


Ce rere aon Te tert nT Ore er ) 
2. A statement will be used to check the condition expression. 
CO ee ee T tree ) 


Put o) in front of the correct sentence and (X) in front of the wrong 
one: 

1. If the condition result lead to false, the statements within { } will be 
executed. (  ) 


2. If total = 100 then the result of (total > = 100) expression leads to true. ( ) 


o 
o 


iF 
| 
| 
| 
I 
| 
I 
| 
| 
l 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
Eu 


| 
| 
| 
l 
| 
| 
| 
| 
| 
j 


p 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


(Fourth Topic) 
Validate data entered into web page 


After completing this topic is expected the student should be able to: 


e Discuss validation of the data to be entered into a webpage. 
e Enter data into a webpage form fields 
e Participate his schoolmates in entering data to an interactive webpage 


Data validation 


After you’ve finished learning basics of JavaScript language, you will use 
this 
language to set a webpage to be an interactive webpage that validates your 


entered data 
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By the help of your teacher and participation of your colleagues, 
e Discuss with your colleagues that after Form submitted, can you: 
Leave the data field empty 
Type any number of characters in textbox 
Type a different password in the textbox 
Type any data type in data field 


You can observe that these data fields accept data without any validation 
By the help of your teacher and participation of your colleagues, 
discuss if there is any way to avoid these defects. 


Of course, you can avoid these defects as following 
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(Required Field) 
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By help of your teacher and participation of your colleagues, 

e Create a webpage in which we can see a Form with these elements: 
Textbox to enter student name 

e Submit button and set value attribute to be "send" to submit the Form 
data to get this: 


1- If submit button clicked without typing student name an alert box will 
be displayed to inform us that this field is required 


Message from webpage 


A required field 


o 
o 


iF 
| 
| 
| 
I 
| 
I 
| 
| 
l 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
Eu 


i 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
l 
| 
| 
| 
| 
| 

j 


Execution: 


<form name="form1" action="data.php"> 
Student name 

<input type="text" name="text1" ><br><br> 
<input type="submit" value="send" onclick="return f1();"> 
</form> 

<script> 

function f1(){ 

if (form1.text1.value==''"'){ 

alert("required field"); 

return false; 

} 

} 


</script> 
Explanation: 


To add a Form element to webpage, you can use the following tag 
<form name="form1" action="requiredl.htm"> 


The name attribute Specifies a name used to identify the form 
The action attribute defines the action to be performed when the form is 
submitted. 


Normally, the form data is sent to a web page on the server when the user 
clicks on the submit button. 


To add a textbox to webpage, you can use the following tag 
<input type="text" name="text1"> 


To add a submit button to webpage, you can use the following tag 
<input type="submit" value="send" onclick="return f1();"> 


The value attribute specifies the caption for a button 


The onclick event occurs when the user clicks on a button, and specifies the 


JavaScript statements or function name (here the function is f1()) to be 
executed 
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To create f1() function that will be called or executed on button clicked, we 
use the following code: 
function f10 { 


To check the content of textbox that is found in the Form form] through 
the value attribute 


if(forml.textl.value==""){ 


To display the alert box with "required field" 
alert("required field"); 


To return false if the textbox was left empty 
returns false; 


Remember that 


e Data validation is the process of ensuring that user input was checked. 


e Ensuring that the user didn’t leave the field empty is one of the data 
validation methods 
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(Fifth Topic) 
Continued to validate data entered into 
web page 


After completing this topic is expected the student should be able to: 
e Discuss validation of the data to be entered into a webpage. 
e Fnter data into a webpage form fields 
e Participates his schoolmates in entering data to an interactive webpage 


Data validation 


Secondly: define the minimum allowed length for the 
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By help of your teacher and participation of your colleagues, 

Required: 

Create a webpage in which we can see a Form with these elements: 
1-Textbox for password input 

2-Submit button for form data submission 

3-An alert box will be displayed on submit button clicked, if the entered data 
was less than the minimum allowed length ( 8 characters ) 
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A minimum length 8 character 
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<html> 

<head> 

</head> 

<body dir="rtl"> 

<form name="form1" action="data.php"> 
<input type="password” id="textl"> 

<input type="submit" value="send" onclick="return f1();"> 
</form> 

<script> 

function f1(){ 

if (form1.text1.value.length<8){ 
alert("minimum allowed length 8 characters"); 
return false; 

} 

} 

</script> 

</body> 

</html> 


| Activity 


Third: Matching the data entered in the two fields 


By help of your teacher and participation of your colleagues, 
Create a webpage in which we can see a Form with these elements: 
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3-Submit button for form data submission 
4-Comparing the content of the two fields, 
in the case of mismatch the contents show a 
warning message ''The two values do not 
match" 
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<body dir="rtl"> 

<form name="form1" action="data.php"> 
password 

<input type="password" id="text1"> 

<br> 

Re-type password 

<input type="password" id="text2"> 

<br> 

<input type="submit" value="send" onclick="return f1();"> 
</form> 

<script> 

function f1(){ 

if (form1.text1.value!==form1.text2.value){ 
alert("the two values do not match"); 

return false; 

} 

} 


</script> 
</body> 


Fourth: Prevent the user from entering type 


Fourth: Prevent the user from entering type of data that different of field data 


Type 
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By help of your teacher and participation of your colleagues, 
Create a webpage in which we can see a Form with these elements: 


1-Textbox for data entry 

2-Submit button for form data submission 

4-check data type of data entry, in the case of enter non-numeric data show 
a warning message "enter a numeric value" 
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enter a numeric value 


<body dir="rtl"> 

<form name="form1" action="data.php"> 
<input type="text" id="text1"> 

<input type="submit" value="send" onclick="return f1();"/> 
</form> 

<script> 

function f1(){ 

if (isNaN(forml.text1.value)){ 
alert("enter a numeric value"); 

return false; 

| 

} 

</script> 

</body> 
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Remember that 


Examples of Data validation methods are like: 
e Defining the minimum allowed length for the input field 
e Matching the data entered in the two fields 
e Prevent the user from entering type of data that different of field data 


type. 


En glen, 


> QUESTIONS AND 
Z EXERCISES 


Complete the following sentences: 
Cases of data validation are: 


1. Leave the data field empty. 


Put (V) in front of the correct sentence and (X) in front of the wron 


one: 

1. To match the password values, we can use the condition 

forml.textl.value=="" ( ) 

2. We add action attribute to <form> element for specify the webpage to 

which the submitted data will be sent. ( ) 

3. To create f1() function we used f1(){ () 
i 4. To return false as a function returned value in the case the textbox is i 
j leaved empty, we used return false; ( ) j 
i 5. The length of data entered within a textbox is less than or equal to 8 j 
i characters forml.textl.value.length<=8 ( ) i 
Í 6. Prevent the user from leave the field empty, we use i 
j forml .textl.value!==forml.text2.value ( ) i 
7. Prevent the user from enter a non-numeric data, we use i 
| ısNaN(forml.textl.value) ( ) i 
| | 
| | 
| , | 
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(Sixth Topic) 
Project 


After completing this topic, it is expected that the student will be able to: 


e Create an interactive webpage 

e Develop an interactive webpage 

e Compare between the static and interactive webpage 

e Appreciate the importance of markup language HTML and JavaScript 
language in creation of an interactive webpage 


Project 
Data validation in the registration webpage 
Dear student, by the help of your teacher and participation of your 
colleagues, 
e After you have learnt how to validate input data, complete your 
previous project (my school) and add a registration webpage. 


The validation process can include: 
e Prevent user from leave textbox empty (required field) 
e The minimum length allowed for the password field is 8 characters 
e Matching the data of the two password fields 
e Prevent user from enter a non-numeric data into the age field 
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registration form 


name 
| password fo 


confirm password | 


age (numeric) | 


gender O male © female 
proficiency language 


O0 English [] French [Q Germany 
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After save button is clicked, data validation process is done .Then it will 
be saved and returned to login webpage (which we will learn later on) for 
finishing registration and enter the home webpage using the name and 
password that were last be saved 
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There are many new form tools used for nut data such as: 
1. Color input field 
2. Date input field 
3. Number input field 
4. Require attribute of text input field 
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1. Color input field 


<form> 

Choose your favorite color 
<br> 

<input type =” color”> 
</form> 


2. Date input field 
The user can select a date value from date picker (calendar) 


T add a date picker as an input field, you can use the following 


<input type =” date”> 
3. Number input field 
Activity: appear number tool inside the web page for use in the instruction oft 
numerical values between 1 t 20 
<form> 
Enter a number from | to 20 
<br> 
<input type =” number” min=”1” max="20”> 
<input type =” submit”> 
</form> 
- After you have typed a number, submit the form data through the 
“submit button “ 
In order that the browser checks an entered value, if it was a non-numeric 
value 
A warning message will be displayed to inform you that you must enter 
a numeric 
- After an entered value isn’t in a range, a warning message will be displayed to 
inform you that the value must be in an available range. 
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(Unit Three) 
— Internet Safety 


By the end of this lesson, students will be able to 

e Identify the internet Safety concepts 

e Identify the different information technology Safety concepts 

e Identify the intellectual Safety sides, cultural, ethical, social and 
religious, concerning the usage of information technology and 
communication 

e Identify the common idioms used on the internet ( identity theft — 
malware- spyware). 

e mention as amnay ideas as possible concerning the users of the 
internet . 

e Design a digital image about malusage of internet. 

e explain the instructions of internet Safety. 

e Appreciate the importance of internet Safety in our life. 


Internet Safety 


The internet is one of the most important means of communication in all 
fields which made it important to focus on the dangers that result from this 
usage. These dangers vary from virus infection, which destroy the system 
data, attack to spoil the user files or harm or blackmail, deploy identity or 
personal data theft and other types of dangers. Many people do not know that 
some information which may be considered useless are so important for 
others. 

In this lesson , we will know how to deal with some of the situations that 
may appear during internet usage .We will also see some common idioms 
used on the internet. 
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Identity Theft: 
It is the impersonation of someone or using his 


name to use any concerning information 


Malware: 

Parasite programs are programs that backdoor 
computer systems. The name is derived from Malicious 
Software . To protect your system against them , use 
antivirus programs and update them continually . 


Spyware: 

It is computer programs that collect personal 

information of the users without their consent. To protect 
your computer , you must use anti-spyware programs that 
detect programs like spyware, adware and files that control 
your internet browser. 


Virus: 
It is a small program that can spread itself to infect 
the computer and programs. 


Secret codes: 


They are all the personal data that must not be shown to everyone on 
the internet like : username, password or mobile phone number 
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Some situations that may happen to you or to one of your colleagues, discuss 
them with your teacher and colleagues 


First situation: 

Sometimes the registration is done by the your Facebook user name 

and password to sign up for an application. The user is exposed to stealing 
his account especially when these applications are hacked. 


How to deal with this situation: 

It is better NOT to sign up for these applications because the main 
objective behind them is not known, especially if the registration is to done 
using the password of your account. If this happened, go and change your 
password at once. 


Second situation: 
Some users publish their personal and family photos on social media sites. 


Problem that may occur 

The user may be exposed to blackmail or 

defame or deal with these photos in an unsuitable way through using image 
editing programs like Photoshop or so. 


How to deal with it 
DO NOT publish your personal photos, and when you do make sure that you 
assigned the viewers to your closest friends. 


Third Situation 

Publishing personal phone number or personal information like home 
address or work place when signing up for a forum or creating personal 
account on social media sites. 


Possible Problem 
The user can be exposed to house robbery or kidnapping especially young 
people, when registering uncontrolled. 
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How to deal with this 

DO NOT publish your personal information or any information concerning 
the user . It is better to hide this information and control young people 
signing up, not allowing them to publish personal information. 


Fourth situation 
Talking to strangers for acquaintance and exchange opinions or culture in 
Facebook. 


Possible Problem 

They may be some deceit especially when the others are unreal persons. This 
may lead to dangerous life problems especially when publishing family 
information. 


How to deal with this 

Use the social media sites to increase social relationships but you have to 
make sure about the person you talk to and his real identity. It is better NOT 
to deal with strangers using fake names. 


Fifth Situation 
Signing up for job online filling in forms with personal details. 


The problem 
There may be deceit by unreal companies through advertising unreal job 


vacancies to just collect personal information and building up a database 
with this , then using the distinguished people for certain purposes. 


How to deal with this 

Online application has be well known but you have to take care to apply only 
for authorized companies and make sure they are real through knowing their 
real places. It is better to apply only for official or governmental job 
vacancies online. 
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Important direction for internet safety 


The following are some of the important guideline to better internet Safety: 


Keep your username and password secret. 
Think well before publishing your personal photo or sending text or 


sound files or videos on the internet. 


Before publishing anything ask the person before publishing his photo 


or sending their phone number or email address to other people online. 


DO NOT reply to unknown messages or from unknown people 

DO NOT add people you do not know to your friend list. 

Do not send messages when angry. 

Not taking any step towards illegal operation is kind of hiding the 
wrong doer. So tell an adult directly of anything you doubt. 

Learn how to ban people from reaching chat box andprint or screenshot 
them to be easy for parents to taek the right step against them. 

Learn how to ban disturbing messages . 

Know well that online chat is not personal , some others may be 
recording or printing these chats and (publish them later on. 


The following idioms are key words for internet search for more 
information about this lesson. 
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Some of the most important idioms used in internet safety 


Acceptable Use 
U Je) alsssuyı | Cyber Bullying | „Ass sail 
Policy i 
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Remember 


Internet Safety has many topics like 
- Identity Theft. 
Malware. 
Spyware 
Virus 


Secret codes. 


It is better not to sign up for some applications whose goal is not known. 
DO NOT publish personal photos and when you do make sure they are 
secret. 

DO NOT publish personal information either in social sites or forums and 
there should be adult control at home. 

Make sure of the real identity of the people you talk to 

When applying for a job online, make sure of the real information of the 
companies and it is better to apply for official or governmental job 


vacancies online. 
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QUESTIONS AND 
EXERCISES 


Complete the following 
1. Impersonation of someone or using the personal information of someone 


| 

| 

| 

| 

| 

| 

| 

l or stealing them is called ........................... 

| D eR een eee are computer programs that collect information about 
| users to control or watch them. 

| D E are small harmful programs that can spread and harm 
| computer and programs. 

4. Secret codes are the personal information for technology users which 
| must not be shown to anyone like ................22ssseseesseeeseeenen 
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1. Talk to a stranger to exchange opinions or culture through social media 
programs. 
2. Applying for job online and providing personal information. 


Put (V ) or (X) for the following sentences 


1. You can publish photos of others or show their phone number online.( ) 
2. When online do not answer any unknown messages. ( ) 

3. Not taking any step against any harm on the internet is kind of hiding 
wrong doers. ( ) 

4. Online talk or chat are protected and cannot be copied or printed. ( ) 
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" Final computer practical sheet PP?) 


1- What is the function of each tag: 


<input type="button”> Add button 


<input type="checkbox”> | Add checkbox 


<input type="submit”> Add submit or send button 


<input type="reset”> Add reset or clear button 


2- Steps to display dialogue box with message “welcome”: 


<html> 
<body> 
<script> 


A, welcome 


alert(“welcome”); 
</script> 

</body> 

</html> 


3- Steps to create webpage displays “computer and information technology’: 


<html> 

<body> 

<script> 

document.write(“computer and information technology”); 
</script> 

</body> 

</html> 


53 


i 
[ 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
l 
| 
| 
| 
| 
| 

a | 


4- Steps to create button call a function that display (Arab Republic Of Egypt): 


<html> 
<body> 


<input type=” button” value="click me” onclick="country()”> 


<script> 

function country(){ 

alert(“Arab Republic Of Egypt”); 
} 

</script> 

</body> 

</html> 


5- The steps to appear message(success) when the degree is greater than or 


equal 50: 
<html> 
<body> 
<form name="form1”> 
<input type="text” name="t1”> 
<input type=” button” value="total” onclick="total()”> 
</form> 
<script> 
function total(){ 
if (form1.t1.value>=50){ 
alert(“success”); 
} 
} 
</script> 
</body> 
</html> 
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To create f1() function 
Answer: function f1(){ 


N 
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To prevent user from leave the field empty 
Answer: (form1.text1.value== 


w 
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To prevent user from enter password less than 8 characters 
Answer: (form1.text1.value.length<=8) 


ES 
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To match the password values 
Answer: (form1.text1.value!==form1.text2.value) 


u 
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To prevent user from enter a non-numeric data 
Answer: (isNaN(form1.text1.value)) 


(ep) 
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What is the function of each tag: 


<input type="text”> Add textbox field or add age input field 


<input type=”password”> | Add password field 


<input type="radio”> Add radio button field 


7- To prevent user from choosing or selecting more than one option: 
<html> 
<body> 
<form> 


nM 


Male<input type="radio” name=”a”> 
female<input type="radio” name="a”> 
</form> 

</body> 


</html> 
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Revision sheet (P.P2) 


Topic 1: 


Form: with a Form element you can add a group of other elements to a webpage such 
as buttons and fields used for data entry in order to send these data to storing. 


Text input field: which gives ability to the user to enter a string or text data via 
keyboard. 


Password input field: as the same as text field but (*) symbol will be displayed instead 
of characters to secure a password key. 


Radio input field: by which the user can select one of a limited number of options such 
as your gender (male/female). 


Write the scientific term to the following statements: 

1. Used with button and data fields to enter data and sending it to the web page. 
(Form) 

2. Give ability to choose or select only one option from many options. 
(Radio input field) 

3. In which you can type any text via keyboard on a webpage. 
(Text input field) 

Complete the following sentences: 


1. To create an interactive webpage for register a student data you add text box, radio 
button used to input data. 


2. To add student name input field, you can add text box to a webpage. 
3. (*) symbol will be displayed instead of original text to secure a password key. 


4. To choose your gender you can add radio button to a webpage. 
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Select from (B) column that matches with other from (A) column: 


(A) (B) 
1 | <input type= "text"> 1 | Adda textbox field 
2 ‘| <input type="password"> 3 | Adda radio button field 
3 | <input type= "radio"> 2 | Adda password field 
4 | <input type= "text"> 4 | Addan age input field 


Put (V) in front of the correct sentence and (X) in front of the wrong: 


1- Ina webpage the form element doesn’t require sending the entered data to the 
web server (x) 

2- To prevent the user from choosing or selecting more than one option or choice, 
you can add name attribute to radio input field (V ) 

3- To add a textbox field in order the user can enter his name, you add radio field (x) 


Topic 2: 
Checkbox field: by which you can select more than one choice 


Button input field: the user can click this to achieve or execute JavaScript functionsuch 
as clear or save entered data within the form 


Submit button: the user click this to submit the form data to another webpage 
assigned by action attribute value of the Form 


Reset button: the user click it to clear all data fields to its original state 
Put (V) in front of the correct sentence and (X) in front of the wrong: 


1-To select your proficiency language(s), you can add checkbox input field to a 


webpage. (V) 
2-Name attribute used for display a text on the button. (X) 


3-Submit button used to clear input fields from any previous data. (X) 
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Complete the following sentences: 
1-button input field Used to execute task or call JavaScript function 
2-Submit button Used to send all Form data to other webpage 
3-Reset button Used to clear all previous data from all input fields 


Select from (B) column that matches with other from (A) column: 


(A) (B) 
1 | <input type="checkbox"> 1 | Add a checkbox 
2 |<inputtype="button"> 2 | Adda button 
3 | <input type="submit"> 3 | Adda submit or send button 
4 | <input type="reset"> 4 | Adda reset or clear button 
Topic 3: 


JavaScript fundamentals: 

- JavaScript commands and instructions are called Statements. 

- JavaScript commands and instructions (Statements) are written within HTML tags. 
- JavaScript statements are written inside <script> ..</script> tag. 

- Each statement must end with a semi-colon (;) character. 

- The letter case must be considered while writing JavaScript statements. 

Notice that: 

The message must be written within double high quotations as (“ the message”). 


alert() statement: used for displaying a dialogue box with message to the user. 
document.write() statement: used for displaying a text within the webpage contents. 


Write the scientific term to the following statements: 


1. The language used to make your registration webpage to interactive. 
(Java script) 

2. used for displaying a dialogue box with message to the user. 
(alert) 

3. used for displaying a text within the webpage contents. 
(document.write) 


Put (V) in front of the correct sentence and (X) in front of the wrong one: 
1. HTML language isn’t enough to make a confirmation to the data entry. ( V ) 


2. Each statement must end with a semi-colon (;) character. (Vv) 


JavaScript statements. (x) 
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